<template>
	<el-card shadow="always" :body-style="{ padding: '20px' }">
		<el-table :data="skuList" border stripe v-loading="tableIsLoading">
			<el-table-column type="index" width="80" label="序号" />
			<el-table-column label="名称" prop="skuName"></el-table-column>
			<el-table-column label="描述" prop="skuDesc"></el-table-column>
			<el-table-column label="默认图片">
				<template v-slot="{ row }">
					<img width="80" :src="row.skuDefaultImg" alt="" />
				</template>
			</el-table-column>
			<el-table-column label="重量" prop="weight"></el-table-column>
			<el-table-column label="价格" prop="price"></el-table-column>
			<el-table-column label="操作" width="300">
				<template v-slot="{ row }">
					<el-button
						v-if="row.isSale"
						type="success"
						size="small"
						icon="ele-Bottom"
						@click="cancelSale(row.id)"
					></el-button>
					<el-button
						v-else
						type="info"
						size="small"
						icon="ele-Top"
						@click="onSale(row.id)"
					></el-button>
					<el-button
						type="primary"
						size="small"
						icon="ele-Edit"
						@click="editSku"
					></el-button>
					<el-button
						type="info"
						size="small"
						icon="ele-Warning"
						@click="openDrawer(row.id)"
					></el-button>
					<el-button
						type="danger"
						size="small"
						icon="ele-Delete"
						@click="deleteSku(row.id)"
					></el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[3, 5, 7, 9]"
			layout="  prev, pager, next,sizes,total"
			:total="totle"
			:style="{ marginTop: '20px' }"
		/>

		<!-- 抽屉 -->
		<el-drawer
			v-model="drawer"
			size="50%"
			title="I am the title"
			:with-header="false"
		>
			<el-row>
				<el-col :span="8">SKU名称</el-col>
				<el-col :span="16">{{ drawerData.skuName }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">SKU描述</el-col>
				<el-col :span="16">{{ drawerData.skuDesc }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">SKU价格</el-col>
				<el-col :span="16">{{ drawerData.price }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">平台属性</el-col>
				<el-col :span="16">
					<el-tag
						type="success"
						size="small"
						v-for="item in drawerData.skuAttrValueList"
						:key="item.id"
					>
						{{ item.attrName }}-{{ item.valueName }}
					</el-tag>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">销售属性</el-col>
				<el-col :span="16">
					<el-tag
						type="success"
						size="small"
						v-for="item in drawerData.skuSaleAttrValueList"
						:key="item.id"
					>
						{{ item.saleAttrName }}-{{ item.saleAttrValueName }}
					</el-tag>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">商品图片</el-col>
				<el-col :span="16">
					<el-carousel height="300px" ref="carousel">
						<el-carousel-item
							v-for="item in drawerData.skuImageList"
							:key="item.id"
						>
							<img :src="item.imgUrl" alt="" height="300" />
						</el-carousel-item>
					</el-carousel>
				</el-col>
			</el-row>
		</el-drawer>
	</el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
	name: "Sku",
});
</script>

<script setup lang="ts">
import { onMounted, ref, watch, nextTick } from "vue";
import {
	reqCancelSale,
	reqDeleteSku,
	reqOnSale,
	reqSkuDetail,
	reqSkuPageList,
	type skuInfoListType,
	type skuInfoType,
} from "@/api/sku";
//页码逻辑
const currentPage = ref(1); //当前页
const pageSize = ref(10); //每页条数
const totle = ref(0); //总条数

//loading状态
const tableIsLoading = ref(false);

//定义一个数据保存初始化的skuList
const skuList = ref<skuInfoListType>([]);

//封装一个初始化请求数据的方法
const reqSkuList = async () => {
	const result = await reqSkuPageList(currentPage.value, pageSize.value);
	skuList.value = result.records;
	totle.value = result.total;

	//设置loading为false
	tableIsLoading.value = false;
};

//初始化发送请求
onMounted(() => {
	reqSkuList();
});

//监听页码和每页条数的改变,重新请求列表
watch([currentPage, pageSize], () => {
	//设置loading为true
	tableIsLoading.value = true;
	reqSkuList();
	window.scrollTo(0, 0);
});

//下架逻辑
const cancelSale = async (id: number) => {
	//设置loading为true
	tableIsLoading.value = true;

	await reqCancelSale(id);
	ElMessage.success("下架成功");

	//重新发送列表请求
	reqSkuList();
};

//上架逻辑
const onSale = async (id: number) => {
	//设置loading为true
	tableIsLoading.value = true;
	await reqOnSale(id);
	ElMessage.success("上架成功");
	//重新发送列表请求
	reqSkuList();
};

//修改sku
const editSku = () => {
	ElMessage.error("正在开发中...");
};

//删除某个sku
const deleteSku = async (id: number) => {
	//设置loading为true
	tableIsLoading.value = true;

	//发送删除请求
	await reqDeleteSku(id);

	ElMessage.success("删除成功");

	//重新发送列表请求
	reqSkuList();
};

//定义一个抽屉的数据
const drawer = ref(false);

//定义一个抽屉的初始化数据
const drawerData = ref<skuInfoType>({
	id: 0,
	spuId: 0, //所在的spuId
	price: 0, //当前sku的价格
	skuName: "", //当前sku的名称
	skuDesc: "", //当前sku的描述
	weight: "", //当前sku的重量
	tmId: 0, //当前sku所在的品牌id
	category3Id: 0, //当前sku所在的三级分类的id
	skuDefaultImg: "", //当前sku的默认的图片
	isSale: 0, //当前sku是否上架
	createTime: "", //当前sku的创建时间
	skuImageList: [], //当前sku图片列表
	skuAttrValueList: [], //当前sku属性值列表
	skuSaleAttrValueList: [], //当前sku销售属
});

//打开抽屉事件
const openDrawer = async (id: number) => {
	drawer.value = true;

	//请求数据
	const result = await reqSkuDetail(id);
	drawerData.value = result;

	//
	//请求完成数据调用carousel组件的方法（手动切换展示某一张）
	nextTick(() => {
		carousel.value.setActiveItem(0);
	});
};

//解决轮播图第一张偶尔不展示的bug

//获取carousel
const carousel = ref();
</script>

<style scoped lang="scss">
.el-row {
	margin-bottom: 20px;
}
.el-carousel__item {
	text-align: center;
}
.el-carousel__item h3 {
	color: #475669;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
	text-align: center;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

//sass语法的深度选择器
:deep(.el-carousel__indicator) {
	button {
		background: red;
	}
}

//原生css方式的深度选择器
/* .el-carousel__item >>> .el-carousel__indicator button {
  background: red;
} */
</style>
